<template>
  <div class="RiskLevel-wrap">
    <div
      v-if="riskList.exposureRisk"
      class="risk-box"
      :class="[
        riskList.exposureRisk === 0 ? 'low' : '',
        riskList.exposureRisk === 1 ? 'medium' : '',
        riskList.exposureRisk === 2 ? 'high' : '',
        riskList.exposureRisk === 3 ? 'critical' : '',
        riskList.exposureRisk === 4 ? 'unknown' : '',
      ]"
    >
      {{ riskLevel[riskList.exposureRisk] }}
    </div>
    <p v-if="showLine" class="line"></p>
    <img
      v-if="riskList.dataStatus"
      class="status-img"
      :src="setSrc(riskList.dataStatus)"
      alt=""
    />
    <img class="isAlive-img" :src="setSrcTwo(riskList.isAlive)" alt="" />
    <div class="head-left-operate">
      <el-select v-model="controlValue" placeholder="控守状态">
        <el-option
          v-for="item in [
            { label: '已控', value: 1 },
            { label: '未控', value: 0 },
          ]"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script lang="ts" setup> 
import {defineProps,ref,reactive, computed} from 'vue';
const props=defineProps({
  riskList: {
      type: Object,
      default: () => {
        return {};
      },
    },
    publicFlag: {
      type: Number,
      default: () => {
        return 0;
      },
    },
    showRisk: {
      type: Boolean,
      default: true,
    },
})
const controlValue=ref(0);
// 暴露风险 0-低危;1-中危;2-高危;3-超危;4-未知
const riskLevel=reactive({
        0: '低危',
        1: '中危',
        2: '高危',
        3: '超危',
        4: '未知',
});
  const showLine=computed(()=>{
    return true;
  })
  // 资产数据状态: 1 新资产, 2 数据更新, 3数据未更新
  const setSrc=(val)=> {
    if (val === 1) {
        return require('@/static/images/retrieval/new.png');
      } else if (val === 2) {
        return require('@/static/images/retrieval/update.png');
      } else if (val === 3) {
        return require('@/static/images/retrieval/inactivationF.png');
      }
    }
    // 存活状态：0 否,1 是,2 未知
   const setSrcTwo=(val)=> {
    if (val == undefined) {
        return require('@/static/images/retrieval/unknown.png');
      }
      if (val === 0) {
        return require('@/static/images/retrieval/inactive.png');
      } else if (val === 1) {
        return require('@/static/images/retrieval/survival.png');
      } else if (val === 2) {
        return require('@/static/images/retrieval/unknown.png');
      }
    }
</script>
<style lang="scss" scoped>
.RiskLevel-wrap {
  display: flex;
  align-items: center;
  // margin-left: 28px;
  .risk-box {
    width: 48px;
    height: 23px;
    border-radius: 4px;
    background: #8590b3;
    font-family: PingFangSC-Medium;
    font-size: 12px;
    color: $-white;
    text-align: center;
    line-height: 23px;

    &.low {
      background: $-v-color-primary;
    }
    &.medium {
      background: #ffc244;
    }
    &.high {
      background: #ff931d;
    }
    &.critical {
      background: #d8421a;
    }
    &.unknown {
      background: #8590b3;
    }
  }

  .line {
    width: 0px;
    height: 14.5px;
    margin: 0px 15px;
    opacity: 1;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  > .status-img {
    width: 56px;
    height: 21px;
    margin-right: 10px;
  }

  > .isAlive-img {
    width: 34px;
    height: 21px;
  }
  .head-left-operate {
    cursor: pointer;
    margin-left: 20px;
    .el-select {
      width: 110px;
    }
  }
}
</style>
